<!DOCTYPE HTML>
<html lang="zh-Hans" class="light" dir="ltr">
    <head>
        <!-- Book generated using mdBook -->
        <meta charset="UTF-8">
        <title>高级类型 - TypeScript 使用指南手册</title>


        <!-- Custom HTML head -->
        
        <meta name="description" content="TypeScript Handbook 中文翻译。">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#ffffff">

        <link rel="icon" href="../../favicon.svg">
        <link rel="shortcut icon" href="../../favicon.png">
        <link rel="stylesheet" href="../../css/variables.css">
        <link rel="stylesheet" href="../../css/general.css">
        <link rel="stylesheet" href="../../css/chrome.css">
        <link rel="stylesheet" href="../../css/print.css" media="print">

        <!-- Fonts -->
        <link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
        <link rel="stylesheet" href="../../fonts/fonts.css">

        <!-- Highlight.js Stylesheets -->
        <link rel="stylesheet" href="../../highlight.css">
        <link rel="stylesheet" href="../../tomorrow-night.css">
        <link rel="stylesheet" href="../../ayu-highlight.css">

        <!-- Custom theme stylesheets -->

    </head>
    <body class="sidebar-visible no-js">
    <div id="body-container">
        <!-- Provide site root to javascript -->
        <script>
            var path_to_root = "../../";
            var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
        </script>

        <!-- Work around some values being stored in localStorage wrapped in quotes -->
        <script>
            try {
                var theme = localStorage.getItem('mdbook-theme');
                var sidebar = localStorage.getItem('mdbook-sidebar');

                if (theme.startsWith('"') && theme.endsWith('"')) {
                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                }

                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                }
            } catch (e) { }
        </script>

        <!-- Set the theme before any content is loaded, prevents flash -->
        <script>
            var theme;
            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
            if (theme === null || theme === undefined) { theme = default_theme; }
            var html = document.querySelector('html');
            html.classList.remove('light')
            html.classList.add(theme);
            var body = document.querySelector('body');
            body.classList.remove('no-js')
            body.classList.add('js');
        </script>

        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">

        <!-- Hide / unhide sidebar before it is displayed -->
        <script>
            var body = document.querySelector('body');
            var sidebar = null;
            var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
            if (document.body.clientWidth >= 1080) {
                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                sidebar = sidebar || 'visible';
            } else {
                sidebar = 'hidden';
            }
            sidebar_toggle.checked = sidebar === 'visible';
            body.classList.remove('sidebar-visible');
            body.classList.add("sidebar-" + sidebar);
        </script>

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <div class="sidebar-scrollbox">
                <ol class="chapter"><li class="chapter-item expanded affix "><a href="../../PREFACE.html">前言</a></li><li class="chapter-item expanded affix "><li class="part-title">快速上手</li><li class="chapter-item expanded "><a href="../../zh/tutorials/index.html"><strong aria-hidden="true">1.</strong> 快速上手</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/tutorials/typescript-in-5-minutes.html"><strong aria-hidden="true">1.1.</strong> 5 分钟了解 TypeScript</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/asp.net-core.html"><strong aria-hidden="true">1.2.</strong> ASP.NET Core</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/asp.net-4.html"><strong aria-hidden="true">1.3.</strong> ASP.NET 4</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/gulp.html"><strong aria-hidden="true">1.4.</strong> Gulp</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/knockout.html"><strong aria-hidden="true">1.5.</strong> Knockout.js</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/react-and-webpack.html"><strong aria-hidden="true">1.6.</strong> React 与 webpack</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/react.html"><strong aria-hidden="true">1.7.</strong> React</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/angular-2.html"><strong aria-hidden="true">1.8.</strong> Angular 2</a></li><li class="chapter-item expanded "><a href="../../zh/tutorials/migrating-from-javascript.html"><strong aria-hidden="true">1.9.</strong> 从 JavaScript 迁移到 TypeScript</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">手册</li><li class="chapter-item expanded "><a href="../../zh/handbook/index.html"><strong aria-hidden="true">2.</strong> 手册</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/handbook/basic-types.html"><strong aria-hidden="true">2.1.</strong> 基础类型</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/interfaces.html"><strong aria-hidden="true">2.2.</strong> 接口</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/functions.html"><strong aria-hidden="true">2.3.</strong> 函数</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/literal-types.html"><strong aria-hidden="true">2.4.</strong> 字面量类型</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/unions-and-intersections.html"><strong aria-hidden="true">2.5.</strong> 联合类型和交叉类型</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/classes.html"><strong aria-hidden="true">2.6.</strong> 类</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/enums.html"><strong aria-hidden="true">2.7.</strong> 枚举</a></li><li class="chapter-item expanded "><a href="../../zh/handbook/generics.html"><strong aria-hidden="true">2.8.</strong> 泛型</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">手册（进阶）</li><li class="chapter-item expanded "><a href="../../zh/reference/index.html"><strong aria-hidden="true">3.</strong> 手册（进阶）</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/reference/advanced-types.html" class="active"><strong aria-hidden="true">3.1.</strong> 高级类型</a></li><li class="chapter-item expanded "><a href="../../zh/reference/utility-types.html"><strong aria-hidden="true">3.2.</strong> 实用工具类型</a></li><li class="chapter-item expanded "><a href="../../zh/reference/decorators.html"><strong aria-hidden="true">3.3.</strong> Decorators</a></li><li class="chapter-item expanded "><a href="../../zh/reference/declaration-merging.html"><strong aria-hidden="true">3.4.</strong> 声明合并</a></li><li class="chapter-item expanded "><a href="../../zh/reference/iterators-and-generators.html"><strong aria-hidden="true">3.5.</strong> Iterators 和 Generators</a></li><li class="chapter-item expanded "><a href="../../zh/reference/jsx.html"><strong aria-hidden="true">3.6.</strong> JSX</a></li><li class="chapter-item expanded "><a href="../../zh/reference/mixins.html"><strong aria-hidden="true">3.7.</strong> 混入</a></li><li class="chapter-item expanded "><a href="../../zh/reference/modules.html"><strong aria-hidden="true">3.8.</strong> 模块</a></li><li class="chapter-item expanded "><a href="../../zh/reference/module-resolution.html"><strong aria-hidden="true">3.9.</strong> 模块解析</a></li><li class="chapter-item expanded "><a href="../../zh/reference/namespaces.html"><strong aria-hidden="true">3.10.</strong> 命名空间</a></li><li class="chapter-item expanded "><a href="../../zh/reference/namespaces-and-modules.html"><strong aria-hidden="true">3.11.</strong> 命名空间和模块</a></li><li class="chapter-item expanded "><a href="../../zh/reference/symbols.html"><strong aria-hidden="true">3.12.</strong> Symbols</a></li><li class="chapter-item expanded "><a href="../../zh/reference/triple-slash-directives.html"><strong aria-hidden="true">3.13.</strong> 三斜线指令</a></li><li class="chapter-item expanded "><a href="../../zh/reference/type-compatibility.html"><strong aria-hidden="true">3.14.</strong> 类型兼容性</a></li><li class="chapter-item expanded "><a href="../../zh/reference/type-inference.html"><strong aria-hidden="true">3.15.</strong> 类型推论</a></li><li class="chapter-item expanded "><a href="../../zh/reference/variable-declarations.html"><strong aria-hidden="true">3.16.</strong> 变量声明</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">手册（v2）</li><li class="chapter-item expanded "><a href="../../zh/handbook-v2/index.html"><strong aria-hidden="true">4.</strong> 手册（v2）</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/handbook-v2/type-manipulation/template-literal-types.html"><strong aria-hidden="true">4.1.</strong> 模版字面量类型</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">TypeScript 声明文件（.d.ts）</li><li class="chapter-item expanded "><a href="../../zh/declaration-files/index.html"><strong aria-hidden="true">5.</strong> 如何书写声明文件</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/declaration-files/introduction.html"><strong aria-hidden="true">5.1.</strong> 介绍</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/by-example.html"><strong aria-hidden="true">5.2.</strong> 举例</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/library-structures.html"><strong aria-hidden="true">5.3.</strong> 库结构</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/templates.html"><strong aria-hidden="true">5.4.</strong> 模板</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/do-s-and-don-ts.html"><strong aria-hidden="true">5.5.</strong> 最佳实践</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/deep-dive.html"><strong aria-hidden="true">5.6.</strong> 深入</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/publishing.html"><strong aria-hidden="true">5.7.</strong> 发布</a></li><li class="chapter-item expanded "><a href="../../zh/declaration-files/consumption.html"><strong aria-hidden="true">5.8.</strong> 使用</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">TypeScript for JavaScript</li><li class="chapter-item expanded "><a href="../../zh/javascript/type-checking-javascript-files.html"><strong aria-hidden="true">6.</strong> JavaScript 文件里的类型检查</a></li><li class="chapter-item expanded affix "><li class="part-title">工程配置</li><li class="chapter-item expanded "><a href="../../zh/project-config/index.html"><strong aria-hidden="true">7.</strong> 工程配置</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/project-config/tsconfig.json.html"><strong aria-hidden="true">7.1.</strong> tsconfig.json</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/project-references.html"><strong aria-hidden="true">7.2.</strong> 工程引用</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/typings-for-npm-packages.html"><strong aria-hidden="true">7.3.</strong> NPM 包的类型</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/compiler-options.html"><strong aria-hidden="true">7.4.</strong> 编译选项</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/configuring-watch.html"><strong aria-hidden="true">7.5.</strong> 配置 Watch</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/compiler-options-in-msbuild.html"><strong aria-hidden="true">7.6.</strong> 在 MSBuild 里使用编译选项</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/integrating-with-build-tools.html"><strong aria-hidden="true">7.7.</strong> 与其它构建工具整合</a></li><li class="chapter-item expanded "><a href="../../zh/project-config/nightly-builds.html"><strong aria-hidden="true">7.8.</strong> 使用 TypeScript 的每日构建版本</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">版本发布说明（Release Notes）</li><li class="chapter-item expanded "><a href="../../zh/release-notes/index.html"><strong aria-hidden="true">8.</strong> 新增功能</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.4.html"><strong aria-hidden="true">8.1.</strong> TypeScript 5.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.3.html"><strong aria-hidden="true">8.2.</strong> TypeScript 5.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.2.html"><strong aria-hidden="true">8.3.</strong> TypeScript 5.2</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.1.html"><strong aria-hidden="true">8.4.</strong> TypeScript 5.1</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-5.0.html"><strong aria-hidden="true">8.5.</strong> TypeScript 5.0</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.9.html"><strong aria-hidden="true">8.6.</strong> TypeScript 4.9</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.8.html"><strong aria-hidden="true">8.7.</strong> TypeScript 4.8</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.7.html"><strong aria-hidden="true">8.8.</strong> TypeScript 4.7</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.6.html"><strong aria-hidden="true">8.9.</strong> TypeScript 4.6</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.5.html"><strong aria-hidden="true">8.10.</strong> TypeScript 4.5</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.4.html"><strong aria-hidden="true">8.11.</strong> TypeScript 4.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.3.html"><strong aria-hidden="true">8.12.</strong> TypeScript 4.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.2.html"><strong aria-hidden="true">8.13.</strong> TypeScript 4.2</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.1.html"><strong aria-hidden="true">8.14.</strong> TypeScript 4.1</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-4.0.html"><strong aria-hidden="true">8.15.</strong> TypeScript 4.0</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.9.html"><strong aria-hidden="true">8.16.</strong> TypeScript 3.9</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.8.html"><strong aria-hidden="true">8.17.</strong> TypeScript 3.8</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.7.html"><strong aria-hidden="true">8.18.</strong> TypeScript 3.7</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.6.html"><strong aria-hidden="true">8.19.</strong> TypeScript 3.6</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.5.html"><strong aria-hidden="true">8.20.</strong> TypeScript 3.5</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.4.html"><strong aria-hidden="true">8.21.</strong> TypeScript 3.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.3.html"><strong aria-hidden="true">8.22.</strong> TypeScript 3.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.2.html"><strong aria-hidden="true">8.23.</strong> TypeScript 3.2</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.1.html"><strong aria-hidden="true">8.24.</strong> TypeScript 3.1</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-3.0.html"><strong aria-hidden="true">8.25.</strong> TypeScript 3.0</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.9.html"><strong aria-hidden="true">8.26.</strong> TypeScript 2.9</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.8.html"><strong aria-hidden="true">8.27.</strong> TypeScript 2.8</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.7.html"><strong aria-hidden="true">8.28.</strong> TypeScript 2.7</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.6.html"><strong aria-hidden="true">8.29.</strong> TypeScript 2.6</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.5.html"><strong aria-hidden="true">8.30.</strong> TypeScript 2.5</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.4.html"><strong aria-hidden="true">8.31.</strong> TypeScript 2.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.3.html"><strong aria-hidden="true">8.32.</strong> TypeScript 2.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.2.html"><strong aria-hidden="true">8.33.</strong> TypeScript 2.2</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.1.html"><strong aria-hidden="true">8.34.</strong> TypeScript 2.1</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-2.0.html"><strong aria-hidden="true">8.35.</strong> TypeScript 2.0</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.8.html"><strong aria-hidden="true">8.36.</strong> TypeScript 1.8</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.7.html"><strong aria-hidden="true">8.37.</strong> TypeScript 1.7</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.6.html"><strong aria-hidden="true">8.38.</strong> TypeScript 1.6</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.5.html"><strong aria-hidden="true">8.39.</strong> TypeScript 1.5</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.4.html"><strong aria-hidden="true">8.40.</strong> TypeScript 1.4</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.3.html"><strong aria-hidden="true">8.41.</strong> TypeScript 1.3</a></li><li class="chapter-item expanded "><a href="../../zh/release-notes/typescript-1.1.html"><strong aria-hidden="true">8.42.</strong> TypeScript 1.1</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">破坏性改动（Breaking Changes）</li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/index.html"><strong aria-hidden="true">9.</strong> Breaking Changes</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.6.html"><strong aria-hidden="true">9.1.</strong> TypeScript 3.6</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.5.html"><strong aria-hidden="true">9.2.</strong> TypeScript 3.5</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.4.html"><strong aria-hidden="true">9.3.</strong> TypeScript 3.4</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.2.html"><strong aria-hidden="true">9.4.</strong> TypeScript 3.2</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.1.html"><strong aria-hidden="true">9.5.</strong> TypeScript 3.1</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-3.0.html"><strong aria-hidden="true">9.6.</strong> TypeScript 3.0</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.9.html"><strong aria-hidden="true">9.7.</strong> TypeScript 2.9</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.8.html"><strong aria-hidden="true">9.8.</strong> TypeScript 2.8</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.7.html"><strong aria-hidden="true">9.9.</strong> TypeScript 2.7</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.6.html"><strong aria-hidden="true">9.10.</strong> TypeScript 2.6</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.4.html"><strong aria-hidden="true">9.11.</strong> TypeScript 2.4</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.3.html"><strong aria-hidden="true">9.12.</strong> TypeScript 2.3</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.2.html"><strong aria-hidden="true">9.13.</strong> TypeScript 2.2</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.1.html"><strong aria-hidden="true">9.14.</strong> TypeScript 2.1</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-2.0.html"><strong aria-hidden="true">9.15.</strong> TypeScript 2.0</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.8.html"><strong aria-hidden="true">9.16.</strong> TypeScript 1.8</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.7.html"><strong aria-hidden="true">9.17.</strong> TypeScript 1.7</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.6.html"><strong aria-hidden="true">9.18.</strong> TypeScript 1.6</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.5.html"><strong aria-hidden="true">9.19.</strong> TypeScript 1.5</a></li><li class="chapter-item expanded "><a href="../../zh/breaking-changes/typescript-1.4.html"><strong aria-hidden="true">9.20.</strong> TypeScript 1.4</a></li></ol></li></ol>
            </div>
            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
                <div class="sidebar-resize-indicator"></div>
            </div>
        </nav>

        <!-- Track and set sidebar scroll position -->
        <script>
            var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
            sidebarScrollbox.addEventListener('click', function(e) {
                if (e.target.tagName === 'A') {
                    sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
                }
            }, { passive: true });
            var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
            sessionStorage.removeItem('sidebar-scroll');
            if (sidebarScrollTop) {
                // preserve sidebar scroll position when navigating via links within sidebar
                sidebarScrollbox.scrollTop = sidebarScrollTop;
            } else {
                // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
                var activeSection = document.querySelector('#sidebar .active');
                if (activeSection) {
                    activeSection.scrollIntoView({ block: 'center' });
                }
            }
        </script>

        <div id="page-wrapper" class="page-wrapper">

            <div class="page">
                                <div id="menu-bar-hover-placeholder"></div>
                <div id="menu-bar" class="menu-bar sticky">
                    <div class="left-buttons">
                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                            <i class="fa fa-bars"></i>
                        </label>
                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                            <i class="fa fa-paint-brush"></i>
                        </button>
                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                        </ul>
                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>

                    <h1 class="menu-title">TypeScript 使用指南手册</h1>

                    <div class="right-buttons">
                        <a href="../../print.html" title="Print this book" aria-label="Print this book">
                            <i id="print-button" class="fa fa-print"></i>
                        </a>

                    </div>
                </div>

                <div id="search-wrapper" class="hidden">
                    <form id="searchbar-outer" class="searchbar-outer">
                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
                    </form>
                    <div id="searchresults-outer" class="searchresults-outer hidden">
                        <div id="searchresults-header" class="searchresults-header"></div>
                        <ul id="searchresults">
                        </ul>
                    </div>
                </div>

                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                <script>
                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
                    });
                </script>

                <div id="content" class="content">
                    <main>
                        <h1 id="高级类型"><a class="header" href="#高级类型">高级类型</a></h1>
<h2 id="交叉类型intersection-types"><a class="header" href="#交叉类型intersection-types">交叉类型（Intersection Types）</a></h2>
<p>交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。 例如，<code>Person &amp; Serializable &amp; Loggable</code>同时是<code>Person</code><em>和</em><code>Serializable</code><em>和</em><code>Loggable</code>。 就是说这个类型的对象同时拥有了这三种类型的成员。</p>
<p>我们大多是在混入（mixins）或其它不适合典型面向对象模型的地方看到交叉类型的使用。 （在JavaScript里发生这种情况的场合很多！） 下面是如何创建混入的一个简单例子("target": "es5")：</p>
<pre><code class="language-typescript">function extend&lt;First, Second&gt;(first: First, second: Second): First &amp; Second {
    const result: Partial&lt;First &amp; Second&gt; = {};
    for (const prop in first) {
        if (first.hasOwnProperty(prop)) {
            (result as First)[prop] = first[prop];
        }
    }
    for (const prop in second) {
        if (second.hasOwnProperty(prop)) {
            (result as Second)[prop] = second[prop];
        }
    }
    return result as First &amp; Second;
}

class Person {
    constructor(public name: string) { }
}

interface Loggable {
    log(name: string): void;
}

class ConsoleLogger implements Loggable {
    log(name) {
        console.log(`Hello, I'm ${name}.`);
    }
}

const jim = extend(new Person('Jim'), ConsoleLogger.prototype);
jim.log(jim.name);
</code></pre>
<h2 id="联合类型union-types"><a class="header" href="#联合类型union-types">联合类型（Union Types）</a></h2>
<p>联合类型与交叉类型很有关联，但是使用上却完全不同。 偶尔你会遇到这种情况，一个代码库希望传入<code>number</code>或<code>string</code>类型的参数。 例如下面的函数：</p>
<pre><code class="language-typescript">/**
 * Takes a string and adds "padding" to the left.
 * If 'padding' is a string, then 'padding' is appended to the left side.
 * If 'padding' is a number, then that number of spaces is added to the left side.
 */
function padLeft(value: string, padding: any) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}

padLeft("Hello world", 4); // returns "    Hello world"
</code></pre>
<p><code>padLeft</code>存在一个问题，<code>padding</code>参数的类型指定成了<code>any</code>。 这就是说我们可以传入一个既不是<code>number</code>也不是<code>string</code>类型的参数，但是TypeScript却不报错。</p>
<pre><code class="language-typescript">let indentedString = padLeft("Hello world", true); // 编译阶段通过，运行时报错
</code></pre>
<p>在传统的面向对象语言里，我们可能会将这两种类型抽象成有层级的类型。 这么做显然是非常清晰的，但同时也存在了过度设计。 <code>padLeft</code>原始版本的好处之一是允许我们传入原始类型。 这样做的话使用起来既简单又方便。 如果我们就是想使用已经存在的函数的话，这种新的方式就不适用了。</p>
<p>代替<code>any</code>， 我们可以使用_联合类型_做为<code>padding</code>的参数：</p>
<pre><code class="language-typescript">/**
 * Takes a string and adds "padding" to the left.
 * If 'padding' is a string, then 'padding' is appended to the left side.
 * If 'padding' is a number, then that number of spaces is added to the left side.
 */
function padLeft(value: string, padding: string | number) {
    // ...
}

let indentedString = padLeft("Hello world", true); // errors during compilation
</code></pre>
<p>联合类型表示一个值可以是几种类型之一。 我们用竖线（<code>|</code>）分隔每个类型，所以<code>number | string | boolean</code>表示一个值可以是<code>number</code>，<code>string</code>，或<code>boolean</code>。</p>
<p>如果一个值是联合类型，我们只能访问此联合类型的所有类型里共有的成员。</p>
<pre><code class="language-typescript">interface Bird {
    fly();
    layEggs();
}

interface Fish {
    swim();
    layEggs();
}

function getSmallPet(): Fish | Bird {
    // ...
}

let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim();    // errors
</code></pre>
<p>这里的联合类型可能有点复杂，但是你很容易就习惯了。 如果一个值的类型是<code>A | B</code>，我们能够_确定_的是它包含了<code>A</code><em>和</em><code>B</code>中共有的成员。 这个例子里，<code>Bird</code>具有一个<code>fly</code>成员。 我们不能确定一个<code>Bird | Fish</code>类型的变量是否有<code>fly</code>方法。 如果变量在运行时是<code>Fish</code>类型，那么调用<code>pet.fly()</code>就出错了。</p>
<h2 id="类型守卫与类型区分type-guards-and-differentiating-types"><a class="header" href="#类型守卫与类型区分type-guards-and-differentiating-types">类型守卫与类型区分（Type Guards and Differentiating Types）</a></h2>
<p>联合类型适合于那些值可以为不同类型的情况。 但当我们想确切地了解是否为<code>Fish</code>时怎么办？ JavaScript里常用来区分2个可能值的方法是检查成员是否存在。 如之前提及的，我们只能访问联合类型中共同拥有的成员。</p>
<pre><code class="language-typescript">let pet = getSmallPet();

// 每一个成员访问都会报错
if (pet.swim) {
    pet.swim();
}
else if (pet.fly) {
    pet.fly();
}
</code></pre>
<p>为了让这段代码工作，我们要使用类型断言：</p>
<pre><code class="language-typescript">let pet = getSmallPet();

if ((pet as Fish).swim) {
    (pet as Fish).swim();
} else if ((pet as Bird).fly) {
    (pet as Bird).fly();
}
</code></pre>
<h3 id="用户自定义的类型守卫"><a class="header" href="#用户自定义的类型守卫">用户自定义的类型守卫</a></h3>
<p>这里可以注意到我们不得不多次使用类型断言。 假若我们一旦检查过类型，就能在之后的每个分支里清楚地知道<code>pet</code>的类型的话就好了。</p>
<p>TypeScript里的_类型守卫_机制让它成为了现实。 类型守卫就是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。</p>
<h4 id="使用类型判定"><a class="header" href="#使用类型判定">使用类型判定</a></h4>
<p>要定义一个类型守卫，我们只要简单地定义一个函数，它的返回值是一个_类型谓词_：</p>
<pre><code class="language-typescript">function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}
</code></pre>
<p>在这个例子里，<code>pet is Fish</code>就是类型谓词。 谓词为<code>parameterName is Type</code>这种形式，<code>parameterName</code>必须是来自于当前函数签名里的一个参数名。</p>
<p>每当使用一些变量调用<code>isFish</code>时，TypeScript会将变量缩减为那个具体的类型，只要这个类型与变量的原始类型是兼容的。</p>
<pre><code class="language-typescript">// 'swim' 和 'fly' 调用都没有问题了

if (isFish(pet)) {
    pet.swim();
}
else {
    pet.fly();
}
</code></pre>
<p>注意TypeScript不仅知道在<code>if</code>分支里<code>pet</code>是<code>Fish</code>类型； 它还清楚在<code>else</code>分支里，一定_不是_<code>Fish</code>类型，一定是<code>Bird</code>类型。</p>
<h4 id="使用in操作符"><a class="header" href="#使用in操作符">使用<code>in</code>操作符</a></h4>
<p><code>in</code>操作符可以作为类型细化表达式来使用。</p>
<p>对于<code>n in x</code>表达式，其中<code>n</code>是字符串字面量或字符串字面量类型且<code>x</code>是个联合类型，那么<code>true</code>分支的类型细化为有一个可选的或必须的属性<code>n</code>，<code>false</code>分支的类型细化为有一个可选的或不存在属性<code>n</code>。</p>
<pre><code class="language-typescript">function move(pet: Fish | Bird) {
    if ("swim" in pet) {
        return pet.swim();
    }
    return pet.fly();
}
</code></pre>
<h3 id="typeof类型守卫"><a class="header" href="#typeof类型守卫"><code>typeof</code>类型守卫</a></h3>
<p>现在我们回过头来看看怎么使用联合类型书写<code>padLeft</code>代码。 我们可以像下面这样利用类型断言来写：</p>
<pre><code class="language-typescript">function isNumber(x: any): x is number {
    return typeof x === "number";
}

function isString(x: any): x is string {
    return typeof x === "string";
}

function padLeft(value: string, padding: string | number) {
    if (isNumber(padding)) {
        return Array(padding + 1).join(" ") + value;
    }
    if (isString(padding)) {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}
</code></pre>
<p>然而，必须要定义一个函数来判断类型是否是原始类型，这太痛苦了。 幸运的是，现在我们不必将<code>typeof x === "number"</code>抽象成一个函数，因为TypeScript可以将它识别为一个类型守卫。 也就是说我们可以直接在代码里检查类型了。</p>
<pre><code class="language-typescript">function padLeft(value: string, padding: string | number) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}
</code></pre>
<p>这些_<code>typeof</code>类型守卫_只有两种形式能被识别：<code>typeof v === "typename"</code>和<code>typeof v !== "typename"</code>，<code>"typename"</code>必须是<code>"number"</code>，<code>"string"</code>，<code>"boolean"</code>或<code>"symbol"</code>。 但是TypeScript并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型守卫。</p>
<h3 id="instanceof类型守卫"><a class="header" href="#instanceof类型守卫"><code>instanceof</code>类型守卫</a></h3>
<p>如果你已经阅读了<code>typeof</code>类型守卫并且对JavaScript里的<code>instanceof</code>操作符熟悉的话，你可能已经猜到了这节要讲的内容。</p>
<p>_<code>instanceof</code>类型守卫_是通过构造函数来细化类型的一种方式。 比如，我们借鉴一下之前字符串填充的例子：</p>
<pre><code class="language-typescript">interface Padder {
    getPaddingString(): string
}

class SpaceRepeatingPadder implements Padder {
    constructor(private numSpaces: number) { }
    getPaddingString() {
        return Array(this.numSpaces + 1).join(" ");
    }
}

class StringPadder implements Padder {
    constructor(private value: string) { }
    getPaddingString() {
        return this.value;
    }
}

function getRandomPadder() {
    return Math.random() &lt; 0.5 ?
        new SpaceRepeatingPadder(4) :
        new StringPadder("  ");
}

// 类型为SpaceRepeatingPadder | StringPadder
let padder: Padder = getRandomPadder();

if (padder instanceof SpaceRepeatingPadder) {
    padder; // 类型细化为'SpaceRepeatingPadder'
}
if (padder instanceof StringPadder) {
    padder; // 类型细化为'StringPadder'
}
</code></pre>
<p><code>instanceof</code>的右侧要求是一个构造函数，TypeScript将细化为：</p>
<ol>
<li>此构造函数的<code>prototype</code>属性的类型，如果它的类型不为<code>any</code>的话</li>
<li>构造签名所返回的类型的联合</li>
</ol>
<p>以此顺序。</p>
<h2 id="可以为null的类型"><a class="header" href="#可以为null的类型">可以为<code>null</code>的类型</a></h2>
<p>TypeScript具有两种特殊的类型，<code>null</code>和<code>undefined</code>，它们分别具有值<code>null</code>和<code>undefined</code>. 我们在<a href="basic-types.html">基础类型</a>一节里已经做过简要说明。 默认情况下，类型检查器认为<code>null</code>与<code>undefined</code>可以赋值给任何类型。 <code>null</code>与<code>undefined</code>是所有其它类型的一个有效值。 这也意味着，你阻止不了将它们赋值给其它类型，就算是你想要阻止这种情况也不行。 <code>null</code>的发明者，Tony Hoare，称它为<a href="https://en.wikipedia.org/wiki/Null_pointer#History">价值亿万美金的错误</a>。</p>
<p><code>--strictNullChecks</code>标记可以解决此错误：当你声明一个变量时，它不会自动地包含<code>null</code>或<code>undefined</code>。 你可以使用联合类型明确的包含它们：</p>
<pre><code class="language-typescript">let s = "foo";
s = null; // 错误, 'null'不能赋值给'string'
let sn: string | null = "bar";
sn = null; // 可以

sn = undefined; // error, 'undefined'不能赋值给'string | null'
</code></pre>
<p>注意，按照JavaScript的语义，TypeScript会把<code>null</code>和<code>undefined</code>区别对待。 <code>string | null</code>，<code>string | undefined</code>和<code>string | undefined | null</code>是不同的类型。</p>
<h3 id="可选参数和可选属性"><a class="header" href="#可选参数和可选属性">可选参数和可选属性</a></h3>
<p>使用了<code>--strictNullChecks</code>，可选参数会被自动地加上<code>| undefined</code>:</p>
<pre><code class="language-typescript">function f(x: number, y?: number) {
    return x + (y || 0);
}
f(1, 2);
f(1);
f(1, undefined);
f(1, null); // error, 'null' is not assignable to 'number | undefined'
</code></pre>
<p>可选属性也会有同样的处理：</p>
<pre><code class="language-typescript">class C {
    a: number;
    b?: number;
}
let c = new C();
c.a = 12;
c.a = undefined; // error, 'undefined' is not assignable to 'number'
c.b = 13;
c.b = undefined; // ok
c.b = null; // error, 'null' is not assignable to 'number | undefined'
</code></pre>
<h3 id="类型守卫和类型断言"><a class="header" href="#类型守卫和类型断言">类型守卫和类型断言</a></h3>
<p>由于可以为<code>null</code>的类型是通过联合类型实现，那么你需要使用类型守卫来去除<code>null</code>。 幸运地是这与在JavaScript里写的代码一致：</p>
<pre><code class="language-typescript">function f(sn: string | null): string {
    if (sn == null) {
        return "default";
    }
    else {
        return sn;
    }
}
</code></pre>
<p>这里很明显地去除了<code>null</code>，你也可以使用短路运算符：</p>
<pre><code class="language-typescript">function f(sn: string | null): string {
    return sn || "default";
}
</code></pre>
<p>如果编译器不能够去除<code>null</code>或<code>undefined</code>，你可以使用类型断言手动去除。 语法是添加<code>!</code>后缀：<code>identifier!</code>从<code>identifier</code>的类型里去除了<code>null</code>和<code>undefined</code>：</p>
<pre><code class="language-typescript">function broken(name: string | null): string {
  function postfix(epithet: string) {
    return name.charAt(0) + '.  the ' + epithet; // error, 'name' is possibly null
  }
  name = name || "Bob";
  return postfix("great");
}

function fixed(name: string | null): string {
  function postfix(epithet: string) {
    return name!.charAt(0) + '.  the ' + epithet; // ok
  }
  name = name || "Bob";
  return postfix("great");
}
</code></pre>
<p>本例使用了嵌套函数，因为编译器无法去除嵌套函数的<code>null</code>（除非是立即调用的函数表达式）。 因为它无法跟踪所有对嵌套函数的调用，尤其是你将内层函数做为外层函数的返回值。 如果无法知道函数在哪里被调用，就无法知道调用时<code>name</code>的类型。</p>
<h2 id="类型别名"><a class="header" href="#类型别名">类型别名</a></h2>
<p>类型别名会给一个类型起个新名字。 类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。</p>
<pre><code class="language-typescript">type Name = string;
type NameResolver = () =&gt; string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    }
    else {
        return n();
    }
}
</code></pre>
<p>起别名不会新建一个类型 - 它创建了一个新_名字_来引用那个类型。 给原始类型起别名通常没什么用，尽管可以做为文档的一种形式使用。</p>
<p>同接口一样，类型别名也可以是泛型 - 我们可以添加类型参数并且在别名声明的右侧传入：</p>
<pre><code class="language-typescript">type Container&lt;T&gt; = { value: T };
</code></pre>
<p>我们也可以使用类型别名来在属性里引用自己：</p>
<pre><code class="language-typescript">type Tree&lt;T&gt; = {
    value: T;
    left: Tree&lt;T&gt;;
    right: Tree&lt;T&gt;;
}
</code></pre>
<p>与交叉类型一起使用，我们可以创建出一些十分稀奇古怪的类型。</p>
<pre><code class="language-typescript">type LinkedList&lt;T&gt; = T &amp; { next: LinkedList&lt;T&gt; };

interface Person {
    name: string;
}

var people: LinkedList&lt;Person&gt;;
var s = people.name;
var s = people.next.name;
var s = people.next.next.name;
var s = people.next.next.next.name;
</code></pre>
<p>然而，类型别名不能出现在声明右侧的任何地方。</p>
<pre><code class="language-typescript">type Yikes = Array&lt;Yikes&gt;; // error
</code></pre>
<h3 id="接口-vs-类型别名"><a class="header" href="#接口-vs-类型别名">接口 vs. 类型别名</a></h3>
<p>像我们提到的，类型别名可以像接口一样；然而，仍有一些细微差别。</p>
<p>其一，接口创建了一个新的名字，可以在其它任何地方使用。 类型别名并不创建新名字—比如，错误信息就不会使用别名。 在下面的示例代码里，在编译器中将鼠标悬停在<code>interfaced</code>上，显示它返回的是<code>Interface</code>，但悬停在<code>aliased</code>上时，显示的却是对象字面量类型。</p>
<pre><code class="language-typescript">type Alias = { num: number }
interface Interface {
    num: number;
}
declare function aliased(arg: Alias): Alias;
declare function interfaced(arg: Interface): Interface;
</code></pre>
<p>在旧版本的TypeScript里，类型别名不能被继承和实现（它们也不能继承和实现其它类型）。从TypeScript 2.7开始，类型别名可以被继承并生成新的交叉类型。例如：<code>type Cat = Animal &amp; { purrs: true }</code>。</p>
<p>因为<a href="https://en.wikipedia.org/wiki/Open/closed_principle">软件中的对象应该对于扩展是开放的，但是对于修改是封闭的</a>，你应该尽量去使用接口代替类型别名。</p>
<p>另一方面，如果你无法通过接口来描述一个类型并且需要使用联合类型或元组类型，这时通常会使用类型别名。</p>
<h2 id="字符串字面量类型"><a class="header" href="#字符串字面量类型">字符串字面量类型</a></h2>
<p>字符串字面量类型允许你指定字符串必须的固定值。 在实际应用中，字符串字面量类型可以与联合类型，类型守卫和类型别名很好的配合。 通过结合使用这些特性，你可以实现类似枚举类型的字符串。</p>
<pre><code class="language-typescript">type Easing = "ease-in" | "ease-out" | "ease-in-out";
class UIElement {
    animate(dx: number, dy: number, easing: Easing) {
        if (easing === "ease-in") {
            // ...
        }
        else if (easing === "ease-out") {
        }
        else if (easing === "ease-in-out") {
        }
        else {
            // error! should not pass null or undefined.
        }
    }
}

let button = new UIElement();
button.animate(0, 0, "ease-in");
button.animate(0, 0, "uneasy"); // error: "uneasy" is not allowed here
</code></pre>
<p>你只能从三种允许的字符中选择其一来做为参数传递，传入其它值则会产生错误。</p>
<pre><code class="language-text">Argument of type '"uneasy"' is not assignable to parameter of type '"ease-in" | "ease-out" | "ease-in-out"'
</code></pre>
<p>字符串字面量类型还可以用于区分函数重载：</p>
<pre><code class="language-typescript">function createElement(tagName: "img"): HTMLImageElement;
function createElement(tagName: "input"): HTMLInputElement;
// ... more overloads ...
function createElement(tagName: string): Element {
    // ... code goes here ...
}
</code></pre>
<h2 id="数字字面量类型"><a class="header" href="#数字字面量类型">数字字面量类型</a></h2>
<p>TypeScript还具有数字字面量类型。</p>
<pre><code class="language-typescript">function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 {
    // ...
}
</code></pre>
<p>我们很少直接这样使用，但它们可以用在缩小范围调试bug的时候：</p>
<pre><code class="language-typescript">function foo(x: number) {
    if (x !== 1 || x !== 2) {
        //         ~~~~~~~
        // Operator '!==' cannot be applied to types '1' and '2'.
    }
}
</code></pre>
<p>换句话说，当<code>x</code>与<code>2</code>进行比较的时候，它的值必须为<code>1</code>，这就意味着上面的比较检查是非法的。</p>
<h2 id="枚举成员类型"><a class="header" href="#枚举成员类型">枚举成员类型</a></h2>
<p>如我们在<a href="enums.html#union-enums-and-enum-member-types">枚举</a>一节里提到的，当每个枚举成员都是用字面量初始化的时候枚举成员是具有类型的。</p>
<p>在我们谈及“单例类型”的时候，多数是指枚举成员类型和数字/字符串字面量类型，尽管大多数用户会互换使用“单例类型”和“字面量类型”。</p>
<h2 id="可辨识联合discriminated-unions"><a class="header" href="#可辨识联合discriminated-unions">可辨识联合（Discriminated Unions）</a></h2>
<p>你可以合并单例类型，联合类型，类型守卫和类型别名来创建一个叫做_可辨识联合_的高级模式，它也称做_标签联合_或_代数数据类型_。 可辨识联合在函数式编程里很有用处。 一些语言会自动地为你辨识联合；而TypeScript则基于已有的JavaScript模式。 它具有3个要素：</p>
<ol>
<li>具有普通的单例类型属性—<em>可辨识的特征</em>。</li>
<li>一个类型别名包含了那些类型的联合—<em>联合</em>。</li>
<li>此属性上的类型守卫。</li>
</ol>
<pre><code class="language-typescript">interface Square {
    kind: "square";
    size: number;
}
interface Rectangle {
    kind: "rectangle";
    width: number;
    height: number;
}
interface Circle {
    kind: "circle";
    radius: number;
}
</code></pre>
<p>首先我们声明了将要联合的接口。 每个接口都有<code>kind</code>属性但有不同的字符串字面量类型。 <code>kind</code>属性称做_可辨识的特征_或_标签_。 其它的属性则特定于各个接口。 注意，目前各个接口间是没有联系的。 下面我们把它们联合到一起：</p>
<pre><code class="language-typescript">type Shape = Square | Rectangle | Circle;
</code></pre>
<p>现在我们使用可辨识联合:</p>
<pre><code class="language-typescript">function area(s: Shape) {
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.height * s.width;
        case "circle": return Math.PI * s.radius ** 2;
    }
}
</code></pre>
<h3 id="完整性检查"><a class="header" href="#完整性检查">完整性检查</a></h3>
<p>当没有涵盖所有可辨识联合的变化时，我们想让编译器可以通知我们。 比如，如果我们添加了<code>Triangle</code>到<code>Shape</code>，我们同时还需要更新<code>area</code>:</p>
<pre><code class="language-typescript">type Shape = Square | Rectangle | Circle | Triangle;
function area(s: Shape) {
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.height * s.width;
        case "circle": return Math.PI * s.radius ** 2;
    }
    // should error here - we didn't handle case "triangle"
}
</code></pre>
<p>有两种方式可以实现。 首先是启用<code>--strictNullChecks</code>并且指定一个返回值类型：</p>
<pre><code class="language-typescript">function area(s: Shape): number { // error: returns number | undefined
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.height * s.width;
        case "circle": return Math.PI * s.radius ** 2;
    }
}
</code></pre>
<p>因为<code>switch</code>没有包含所有情况，所以TypeScript认为这个函数有时候会返回<code>undefined</code>。 如果你明确地指定了返回值类型为<code>number</code>，那么你会看到一个错误，因为实际上返回值的类型为<code>number | undefined</code>。 然而，这种方法存在些微妙之处且<code>--strictNullChecks</code>对旧代码支持不好。</p>
<p>第二种方法使用<code>never</code>类型，编译器用它来进行完整性检查：</p>
<pre><code class="language-typescript">function assertNever(x: never): never {
    throw new Error("Unexpected object: " + x);
}
function area(s: Shape) {
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.height * s.width;
        case "circle": return Math.PI * s.radius ** 2;
        default: return assertNever(s); // error here if there are missing cases
    }
}
</code></pre>
<p>这里，<code>assertNever</code>检查<code>s</code>是否为<code>never</code>类型—即为除去所有可能情况后剩下的类型。 如果你忘记了某个case，那么<code>s</code>将具有一个真实的类型并且你会得到一个错误。 这种方式需要你定义一个额外的函数，但是在你忘记某个case的时候也更加明显。</p>
<h2 id="多态的this类型"><a class="header" href="#多态的this类型">多态的<code>this</code>类型</a></h2>
<p>多态的<code>this</code>类型表示的是某个包含类或接口的_子类型_。 这被称做_F_-bounded多态性。 它能很容易的表现连贯接口间的继承，比如。 在计算器的例子里，在每个操作之后都返回<code>this</code>类型：</p>
<pre><code class="language-typescript">class BasicCalculator {
    public constructor(protected value: number = 0) { }
    public currentValue(): number {
        return this.value;
    }
    public add(operand: number): this {
        this.value += operand;
        return this;
    }
    public multiply(operand: number): this {
        this.value *= operand;
        return this;
    }
    // ... other operations go here ...
}

let v = new BasicCalculator(2)
            .multiply(5)
            .add(1)
            .currentValue();
</code></pre>
<p>由于这个类使用了<code>this</code>类型，你可以继承它，新的类可以直接使用之前的方法，不需要做任何的改变。</p>
<pre><code class="language-typescript">class ScientificCalculator extends BasicCalculator {
    public constructor(value = 0) {
        super(value);
    }
    public sin() {
        this.value = Math.sin(this.value);
        return this;
    }
    // ... other operations go here ...
}

let v = new ScientificCalculator(2)
        .multiply(5)
        .sin()
        .add(1)
        .currentValue();
</code></pre>
<p>如果没有<code>this</code>类型，<code>ScientificCalculator</code>就不能够在继承<code>BasicCalculator</code>的同时还保持接口的连贯性。 <code>multiply</code>将会返回<code>BasicCalculator</code>，它并没有<code>sin</code>方法。 然而，使用<code>this</code>类型，<code>multiply</code>会返回<code>this</code>，在这里就是<code>ScientificCalculator</code>。</p>
<h2 id="索引类型index-types"><a class="header" href="#索引类型index-types">索引类型（Index types）</a></h2>
<p>使用索引类型，编译器就能够检查使用了动态属性名的代码。 例如，一个常见的JavaScript模式是从对象中选取属性的子集。</p>
<pre><code class="language-javascript">function pluck(o, propertyNames) {
    return propertyNames.map(n =&gt; o[n]);
}
</code></pre>
<p>下面是如何在TypeScript里使用此函数，通过<strong>索引类型查询</strong>和<strong>索引访问</strong>操作符：</p>
<pre><code class="language-typescript">function pluck&lt;T, K extends keyof T&gt;(o: T, propertyNames: K[]): T[K][] {
  return propertyNames.map(n =&gt; o[n]);
}

interface Car {
    manufacturer: string;
    model: string;
    year: number;
}
let taxi: Car = {
    manufacturer: 'Toyota',
    model: 'Camry',
    year: 2014
};

// Manufacturer and model are both of type string,
// so we can pluck them both into a typed string array
let makeAndModel: string[] = pluck(taxi, ['manufacturer', 'model']);

// If we try to pluck model and year, we get an
// array of a union type: (string | number)[]
let modelYear = pluck(taxi, ['model', 'year'])
</code></pre>
<p>编译器会检查<code>manufacturer</code>和<code>model</code>是否真的是<code>Car</code>上的一个属性。 本例还引入了几个新的类型操作符。 首先是<code>keyof T</code>，<strong>索引类型查询操作符</strong>。 对于任何类型<code>T</code>，<code>keyof T</code>的结果为<code>T</code>上已知的公共属性名的联合。 例如：</p>
<pre><code class="language-typescript">let carProps: keyof Car; // the union of ('manufacturer' | 'model' | 'year')
</code></pre>
<p><code>keyof Car</code>是完全可以与<code>'manufacturer' | 'model' | 'year'</code>互相替换的。 不同的是如果你添加了其它的属性到<code>Car</code>，例如<code>ownersAddress: string</code>，那么<code>keyof Car</code>会自动变为<code>'manufacturer' | 'model' | 'year' | 'ownersAddress'</code>。 你可以在像<code>pluck</code>函数这类上下文里使用<code>keyof</code>，因为在使用之前你并不清楚可能出现的属性名。 但编译器会检查你是否传入了正确的属性名给<code>pluck</code>：</p>
<pre><code class="language-typescript">// error, 'unknown' is not in 'manufacturer' | 'model' | 'year'
pluck(taxi, ['year', 'unknown']);
</code></pre>
<p>第二个操作符是<code>T[K]</code>，<strong>索引访问操作符</strong>。 在这里，类型语法反映了表达式语法。 这意味着<code>person['name']</code>具有类型<code>Person['name']</code> — 在我们的例子里则为<code>string</code>类型。 然而，就像索引类型查询一样，你可以在普通的上下文里使用<code>T[K]</code>，这正是它的强大所在。 你只要确保类型变量<code>K extends keyof T</code>就可以了。 例如下面<code>getProperty</code>函数的例子：</p>
<pre><code class="language-typescript">function getProperty&lt;T, K extends keyof T&gt;(o: T, propertyName: K): T[K] {
    return o[propertyName]; // o[propertyName] is of type T[K]
}
</code></pre>
<p><code>getProperty</code>里的<code>o: T</code>和<code>propertyName: K</code>，意味着<code>o[propertyName]: T[K]</code>。 当你返回<code>T[K]</code>的结果，编译器会实例化键的真实类型，因此<code>getProperty</code>的返回值类型会随着你需要的属性改变。</p>
<pre><code class="language-typescript">let name: string = getProperty(taxi, 'manufacturer');
let year: number = getProperty(taxi, 'year');

// error, 'unknown' is not in 'manufacturer' | 'model' | 'year'
let unknown = getProperty(taxi, 'unknown');
</code></pre>
<h3 id="索引类型和字符串索引签名"><a class="header" href="#索引类型和字符串索引签名">索引类型和字符串索引签名</a></h3>
<p><code>keyof</code>和<code>T[K]</code>与字符串索引签名进行交互。索引签名的参数类型必须为<code>number</code>或<code>string</code>。 如果你有一个带有字符串索引签名的类型，那么<code>keyof T</code>会是<code>string | number</code>。 (并非只有<code>string</code>，因为在JavaScript里，你可以使用字符串<code>object['42']</code>或 数字<code>object[42]</code>索引来访问对象属性)。 并且<code>T[string]</code>为索引签名的类型：</p>
<pre><code class="language-typescript">interface Dictionary&lt;T&gt; {
    [key: string]: T;
}
let keys: keyof Dictionary&lt;number&gt;; // string | number
let value: Dictionary&lt;number&gt;['foo']; // number
</code></pre>
<p>如果一个类型带有数字索引签名，那么<code>keyof T</code>为<code>number</code>。</p>
<pre><code class="language-typescript">interface Dictionary&lt;T&gt; {
    [key: number]: T;
}
let keys: keyof Dictionary&lt;number&gt;; // number
let value: Dictionary&lt;number&gt;['foo']; // Error, Property 'foo' does not exist on type 'Dictionary&lt;number&gt;'.
let value: Dictionary&lt;number&gt;[42]; // number
</code></pre>
<h2 id="映射类型"><a class="header" href="#映射类型">映射类型</a></h2>
<p>一个常见的任务是将一个已知的类型每个属性都变为可选的：</p>
<pre><code class="language-typescript">interface PersonPartial {
    name?: string;
    age?: number;
}
</code></pre>
<p>或者我们想要一个只读版本：</p>
<pre><code class="language-typescript">interface PersonReadonly {
    readonly name: string;
    readonly age: number;
}
</code></pre>
<p>这在JavaScript里经常出现，TypeScript提供了从旧类型中创建新类型的一种方式 — <strong>映射类型</strong>。 在映射类型里，新类型以相同的形式去转换旧类型里每个属性。 例如，你可以令每个属性成为<code>readonly</code>类型或可选的。 下面是一些例子：</p>
<pre><code class="language-typescript">type Readonly&lt;T&gt; = {
    readonly [P in keyof T]: T[P];
}
type Partial&lt;T&gt; = {
    [P in keyof T]?: T[P];
}
</code></pre>
<p>像下面这样使用：</p>
<pre><code class="language-typescript">type PersonPartial = Partial&lt;Person&gt;;
type ReadonlyPerson = Readonly&lt;Person&gt;;
</code></pre>
<p>需要注意的是这个语法描述的是类型而非成员。 若想添加成员，则可以使用交叉类型：</p>
<pre><code class="language-typescript">// 这样使用
type PartialWithNewMember&lt;T&gt; = {
  [P in keyof T]?: T[P];
} &amp; { newMember: boolean }
// 不要这样使用
// 这会报错！
type PartialWithNewMember&lt;T&gt; = {
  [P in keyof T]?: T[P];
  newMember: boolean;
}
</code></pre>
<p>下面来看看最简单的映射类型和它的组成部分：</p>
<pre><code class="language-typescript">type Keys = 'option1' | 'option2';
type Flags = { [K in Keys]: boolean };
</code></pre>
<p>它的语法与索引签名的语法类型，内部使用了<code>for .. in</code>。 具有三个部分：</p>
<ol>
<li>类型变量<code>K</code>，它会依次绑定到每个属性。</li>
<li>字符串字面量联合的<code>Keys</code>，它包含了要迭代的属性名的集合。</li>
<li>属性的结果类型。</li>
</ol>
<p>在个简单的例子里，<code>Keys</code>是硬编码的属性名列表并且属性类型永远是<code>boolean</code>，因此这个映射类型等同于：</p>
<pre><code class="language-typescript">type Flags = {
    option1: boolean;
    option2: boolean;
}
</code></pre>
<p>在真正的应用里，可能不同于上面的<code>Readonly</code>或<code>Partial</code>。 它们会基于一些已存在的类型，且按照一定的方式转换字段。 这就是<code>keyof</code>和索引访问类型要做的事情：</p>
<pre><code class="language-typescript">type NullablePerson = { [P in keyof Person]: Person[P] | null }
type PartialPerson = { [P in keyof Person]?: Person[P] }
</code></pre>
<p>但它更有用的地方是可以有一些通用版本。</p>
<pre><code class="language-typescript">type Nullable&lt;T&gt; = { [P in keyof T]: T[P] | null }
type Partial&lt;T&gt; = { [P in keyof T]?: T[P] }
</code></pre>
<p>在这些例子里，属性列表是<code>keyof T</code>且结果类型是<code>T[P]</code>的变体。 这是使用通用映射类型的一个好模版。 因为这类转换是<a href="https://en.wikipedia.org/wiki/Homomorphism">同态</a>的，映射只作用于<code>T</code>的属性而没有其它的。 编译器知道在添加任何新属性之前可以拷贝所有存在的属性修饰符。 例如，假设<code>Person.name</code>是只读的，那么<code>Partial&lt;Person&gt;.name</code>也将是只读的且为可选的。</p>
<p>下面是另一个例子，<code>T[P]</code>被包装在<code>Proxy&lt;T&gt;</code>类里：</p>
<pre><code class="language-typescript">type Proxy&lt;T&gt; = {
    get(): T;
    set(value: T): void;
}
type Proxify&lt;T&gt; = {
    [P in keyof T]: Proxy&lt;T[P]&gt;;
}
function proxify&lt;T&gt;(o: T): Proxify&lt;T&gt; {
   // ... wrap proxies ...
}
let proxyProps = proxify(props);
</code></pre>
<p>注意<code>Readonly&lt;T&gt;</code>和<code>Partial&lt;T&gt;</code>用处不小，因此它们与<code>Pick</code>和<code>Record</code>一同被包含进了TypeScript的标准库里：</p>
<pre><code class="language-typescript">type Pick&lt;T, K extends keyof T&gt; = {
    [P in K]: T[P];
}
type Record&lt;K extends keyof any, T&gt; = {
    [P in K]: T;
}
</code></pre>
<p><code>Readonly</code>，<code>Partial</code>和<code>Pick</code>是同态的，但<code>Record</code>不是。 因为<code>Record</code>并不需要输入类型来拷贝属性，所以它不属于同态：</p>
<pre><code class="language-typescript">type ThreeStringProps = Record&lt;'prop1' | 'prop2' | 'prop3', string&gt;
</code></pre>
<p>非同态类型本质上会创建新的属性，因此它们不会从它处拷贝属性修饰符。</p>
<h3 id="由映射类型进行推断"><a class="header" href="#由映射类型进行推断">由映射类型进行推断</a></h3>
<p>现在你了解了如何包装一个类型的属性，那么接下来就是如何拆包。 其实这也非常容易：</p>
<pre><code class="language-typescript">function unproxify&lt;T&gt;(t: Proxify&lt;T&gt;): T {
    let result = {} as T;
    for (const k in t) {
        result[k] = t[k].get();
    }
    return result;
}

let originalProps = unproxify(proxyProps);
</code></pre>
<p>注意这个拆包推断只适用于同态的映射类型。 如果映射类型不是同态的，那么需要给拆包函数一个明确的类型参数。</p>
<h3 id="有条件类型"><a class="header" href="#有条件类型">有条件类型</a></h3>
<p>TypeScript 2.8引入了_有条件类型_，它能够表示非统一的类型。 有条件的类型会以一个条件表达式进行类型关系检测，从而在两种类型中选择其一：</p>
<pre><code class="language-typescript">T extends U ? X : Y
</code></pre>
<p>上面的类型意思是，若<code>T</code>能够赋值给<code>U</code>，那么类型是<code>X</code>，否则为<code>Y</code>。</p>
<p>有条件的类型<code>T extends U ? X : Y</code>或者_解析_为<code>X</code>，或者_解析_为<code>Y</code>，再或者_延迟_解析，因为它可能依赖一个或多个类型变量。 若<code>T</code>或<code>U</code>包含类型参数，那么是否解析为<code>X</code>或<code>Y</code>或推迟，取决于类型系统是否有足够的信息来确定<code>T</code>总是可以赋值给<code>U</code>。</p>
<p>下面是一些类型可以被立即解析的例子：</p>
<pre><code class="language-typescript">declare function f&lt;T extends boolean&gt;(x: T): T extends true ? string : number;

// Type is 'string | number
let x = f(Math.random() &lt; 0.5)
</code></pre>
<p>另外一个例子涉及<code>TypeName</code>类型别名，它使用了嵌套了有条件类型：</p>
<pre><code class="language-typescript">type TypeName&lt;T&gt; =
    T extends string ? "string" :
    T extends number ? "number" :
    T extends boolean ? "boolean" :
    T extends undefined ? "undefined" :
    T extends Function ? "function" :
    "object";

type T0 = TypeName&lt;string&gt;;  // "string"
type T1 = TypeName&lt;"a"&gt;;  // "string"
type T2 = TypeName&lt;true&gt;;  // "boolean"
type T3 = TypeName&lt;() =&gt; void&gt;;  // "function"
type T4 = TypeName&lt;string[]&gt;;  // "object"
</code></pre>
<p>下面是一个有条件类型被推迟解析的例子:</p>
<pre><code class="language-typescript">interface Foo {
    propA: boolean;
    propB: boolean;
}

declare function f&lt;T&gt;(x: T): T extends Foo ? string : number;

function foo&lt;U&gt;(x: U) {
    // Has type 'U extends Foo ? string : number'
    let a = f(x);

    // This assignment is allowed though!
    let b: string | number = a;
}
</code></pre>
<p>这里，<code>a</code>变量含有未确定的有条件类型。 当有另一段代码调用<code>foo</code>，它会用其它类型替换<code>U</code>，TypeScript将重新计算有条件类型，决定它是否可以选择一个分支。</p>
<p>与此同时，我们可以将有条件类型赋值给其它类型，只要有条件类型的每个分支都可以赋值给目标类型。 因此在我们的例子里，我们可以将<code>U extends Foo ? string : number</code>赋值给<code>string | number</code>，因为不管这个有条件类型最终结果是什么，它只能是<code>string</code>或<code>number</code>。</p>
<h4 id="分布式有条件类型"><a class="header" href="#分布式有条件类型">分布式有条件类型</a></h4>
<p>如果有条件类型里待检查的类型是<code>naked type parameter</code>，那么它也被称为“分布式有条件类型”。 分布式有条件类型在实例化时会自动分发成联合类型。 例如，实例化<code>T extends U ? X : Y</code>，<code>T</code>的类型为<code>A | B | C</code>，会被解析为<code>(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)</code>。</p>
<p><strong>例子</strong></p>
<pre><code class="language-typescript">type T10 = TypeName&lt;string | (() =&gt; void)&gt;;  // "string" | "function"
type T12 = TypeName&lt;string | string[] | undefined&gt;;  // "string" | "object" | "undefined"
type T11 = TypeName&lt;string[] | number[]&gt;;  // "object"
</code></pre>
<p>在<code>T extends U ? X : Y</code>的实例化里，对<code>T</code>的引用被解析为联合类型的一部分（比如，<code>T</code>指向某一单个部分，在有条件类型分布到联合类型之后）。 此外，在<code>X</code>内对<code>T</code>的引用有一个附加的类型参数约束<code>U</code>（例如，<code>T</code>被当成在<code>X</code>内可赋值给<code>U</code>）。</p>
<p><strong>例子</strong></p>
<pre><code class="language-typescript">type BoxedValue&lt;T&gt; = { value: T };
type BoxedArray&lt;T&gt; = { array: T[] };
type Boxed&lt;T&gt; = T extends any[] ? BoxedArray&lt;T[number]&gt; : BoxedValue&lt;T&gt;;

type T20 = Boxed&lt;string&gt;;  // BoxedValue&lt;string&gt;;
type T21 = Boxed&lt;number[]&gt;;  // BoxedArray&lt;number&gt;;
type T22 = Boxed&lt;string | number[]&gt;;  // BoxedValue&lt;string&gt; | BoxedArray&lt;number&gt;;
</code></pre>
<p>注意在<code>Boxed&lt;T&gt;</code>的<code>true</code>分支里，<code>T</code>有个额外的约束<code>any[]</code>，因此它适用于<code>T[number]</code>数组元素类型。同时也注意一下有条件类型是如何分布成联合类型的。</p>
<p>有条件类型的分布式的属性可以方便地用来_过滤_联合类型：</p>
<pre><code class="language-typescript">type Diff&lt;T, U&gt; = T extends U ? never : T;  // Remove types from T that are assignable to U
type Filter&lt;T, U&gt; = T extends U ? T : never;  // Remove types from T that are not assignable to U

type T30 = Diff&lt;"a" | "b" | "c" | "d", "a" | "c" | "f"&gt;;  // "b" | "d"
type T31 = Filter&lt;"a" | "b" | "c" | "d", "a" | "c" | "f"&gt;;  // "a" | "c"
type T32 = Diff&lt;string | number | (() =&gt; void), Function&gt;;  // string | number
type T33 = Filter&lt;string | number | (() =&gt; void), Function&gt;;  // () =&gt; void

type NonNullable&lt;T&gt; = Diff&lt;T, null | undefined&gt;;  // Remove null and undefined from T

type T34 = NonNullable&lt;string | number | undefined&gt;;  // string | number
type T35 = NonNullable&lt;string | string[] | null | undefined&gt;;  // string | string[]

function f1&lt;T&gt;(x: T, y: NonNullable&lt;T&gt;) {
    x = y;  // Ok
    y = x;  // Error
}

function f2&lt;T extends string | undefined&gt;(x: T, y: NonNullable&lt;T&gt;) {
    x = y;  // Ok
    y = x;  // Error
    let s1: string = x;  // Error
    let s2: string = y;  // Ok
}
</code></pre>
<p>有条件类型与映射类型结合时特别有用：</p>
<pre><code class="language-typescript">type FunctionPropertyNames&lt;T&gt; = { [K in keyof T]: T[K] extends Function ? K : never }[keyof T];
type FunctionProperties&lt;T&gt; = Pick&lt;T, FunctionPropertyNames&lt;T&gt;&gt;;

type NonFunctionPropertyNames&lt;T&gt; = { [K in keyof T]: T[K] extends Function ? never : K }[keyof T];
type NonFunctionProperties&lt;T&gt; = Pick&lt;T, NonFunctionPropertyNames&lt;T&gt;&gt;;

interface Part {
    id: number;
    name: string;
    subparts: Part[];
    updatePart(newName: string): void;
}

type T40 = FunctionPropertyNames&lt;Part&gt;;  // "updatePart"
type T41 = NonFunctionPropertyNames&lt;Part&gt;;  // "id" | "name" | "subparts"
type T42 = FunctionProperties&lt;Part&gt;;  // { updatePart(newName: string): void }
type T43 = NonFunctionProperties&lt;Part&gt;;  // { id: number, name: string, subparts: Part[] }
</code></pre>
<p>与联合类型和交叉类型相似，有条件类型不允许递归地引用自己。比如下面的错误。</p>
<p><strong>例子</strong></p>
<pre><code class="language-typescript">// 在 TypeScript 4.1 之前的版本会报错。
// TypeScript 4.1 改进了对递归的有条件类型的支持，详情参考 4.1 版本发布说明
type ElementType&lt;T&gt; = T extends any[] ? ElementType&lt;T[number]&gt; : T;
</code></pre>
<h4 id="有条件类型中的类型推断"><a class="header" href="#有条件类型中的类型推断">有条件类型中的类型推断</a></h4>
<p>现在在有条件类型的<code>extends</code>子语句中，允许出现<code>infer</code>声明，它会引入一个待推断的类型变量。 这个推断的类型变量可以在有条件类型的true分支中被引用。 允许出现多个同类型变量的<code>infer</code>。</p>
<p>例如，下面代码会提取函数类型的返回值类型：</p>
<pre><code class="language-typescript">type ReturnType&lt;T&gt; = T extends (...args: any[]) =&gt; infer R ? R : any;
</code></pre>
<p>有条件类型可以嵌套来构成一系列的匹配模式，按顺序进行求值：</p>
<pre><code class="language-typescript">type Unpacked&lt;T&gt; =
    T extends (infer U)[] ? U :
    T extends (...args: any[]) =&gt; infer U ? U :
    T extends Promise&lt;infer U&gt; ? U :
    T;

type T0 = Unpacked&lt;string&gt;;  // string
type T1 = Unpacked&lt;string[]&gt;;  // string
type T2 = Unpacked&lt;() =&gt; string&gt;;  // string
type T3 = Unpacked&lt;Promise&lt;string&gt;&gt;;  // string
type T4 = Unpacked&lt;Promise&lt;string&gt;[]&gt;;  // Promise&lt;string&gt;
type T5 = Unpacked&lt;Unpacked&lt;Promise&lt;string&gt;[]&gt;&gt;;  // string
</code></pre>
<p>下面的例子解释了在协变位置上，同一个类型变量的多个候选类型会被推断为联合类型：</p>
<pre><code class="language-typescript">type Foo&lt;T&gt; = T extends { a: infer U, b: infer U } ? U : never;
type T10 = Foo&lt;{ a: string, b: string }&gt;;  // string
type T11 = Foo&lt;{ a: string, b: number }&gt;;  // string | number
</code></pre>
<p>相似地，在抗变位置上，同一个类型变量的多个候选类型会被推断为交叉类型：</p>
<pre><code class="language-typescript">type Bar&lt;T&gt; = T extends { a: (x: infer U) =&gt; void, b: (x: infer U) =&gt; void } ? U : never;
type T20 = Bar&lt;{ a: (x: string) =&gt; void, b: (x: string) =&gt; void }&gt;;  // string
type T21 = Bar&lt;{ a: (x: string) =&gt; void, b: (x: number) =&gt; void }&gt;;  // string &amp; number
</code></pre>
<p>当推断具有多个调用签名（例如函数重载类型）的类型时，用_最后_的签名（大概是最自由的包含所有情况的签名）进行推断。 无法根据参数类型列表来解析重载。</p>
<pre><code class="language-typescript">declare function foo(x: string): number;
declare function foo(x: number): string;
declare function foo(x: string | number): string | number;
type T30 = ReturnType&lt;typeof foo&gt;;  // string | number
</code></pre>
<p>无法在正常类型参数的约束子语句中使用<code>infer</code>声明：</p>
<pre><code class="language-typescript">type ReturnType&lt;T extends (...args: any[]) =&gt; infer R&gt; = R;  // 错误，不支持
</code></pre>
<p>但是，可以这样达到同样的效果，在约束里删掉类型变量，用有条件类型替换：</p>
<pre><code class="language-typescript">type AnyFunction = (...args: any[]) =&gt; any;
type ReturnType&lt;T extends AnyFunction&gt; = T extends (...args: any[]) =&gt; infer R ? R : any;
</code></pre>
<h4 id="预定义的有条件类型"><a class="header" href="#预定义的有条件类型">预定义的有条件类型</a></h4>
<p>TypeScript 2.8在<code>lib.d.ts</code>里增加了一些预定义的有条件类型：</p>
<ul>
<li><code>Exclude&lt;T, U&gt;</code> -- 从<code>T</code>中剔除可以赋值给<code>U</code>的类型。</li>
<li><code>Extract&lt;T, U&gt;</code> -- 提取<code>T</code>中可以赋值给<code>U</code>的类型。</li>
<li><code>NonNullable&lt;T&gt;</code> -- 从<code>T</code>中剔除<code>null</code>和<code>undefined</code>。</li>
<li><code>ReturnType&lt;T&gt;</code> -- 获取函数返回值类型。</li>
<li><code>InstanceType&lt;T&gt;</code> -- 获取构造函数类型的实例类型。</li>
</ul>
<p><strong>Example</strong></p>
<pre><code class="language-typescript">type T00 = Exclude&lt;"a" | "b" | "c" | "d", "a" | "c" | "f"&gt;;  // "b" | "d"
type T01 = Extract&lt;"a" | "b" | "c" | "d", "a" | "c" | "f"&gt;;  // "a" | "c"

type T02 = Exclude&lt;string | number | (() =&gt; void), Function&gt;;  // string | number
type T03 = Extract&lt;string | number | (() =&gt; void), Function&gt;;  // () =&gt; void

type T04 = NonNullable&lt;string | number | undefined&gt;;  // string | number
type T05 = NonNullable&lt;(() =&gt; string) | string[] | null | undefined&gt;;  // (() =&gt; string) | string[]

function f1(s: string) {
    return { a: 1, b: s };
}

class C {
    x = 0;
    y = 0;
}

type T10 = ReturnType&lt;() =&gt; string&gt;;  // string
type T11 = ReturnType&lt;(s: string) =&gt; void&gt;;  // void
type T12 = ReturnType&lt;(&lt;T&gt;() =&gt; T)&gt;;  // {}
type T13 = ReturnType&lt;(&lt;T extends U, U extends number[]&gt;() =&gt; T)&gt;;  // number[]
type T14 = ReturnType&lt;typeof f1&gt;;  // { a: number, b: string }
type T15 = ReturnType&lt;any&gt;;  // any
type T16 = ReturnType&lt;never&gt;;  // never
type T17 = ReturnType&lt;string&gt;;  // Error
type T18 = ReturnType&lt;Function&gt;;  // Error

type T20 = InstanceType&lt;typeof C&gt;;  // C
type T21 = InstanceType&lt;any&gt;;  // any
type T22 = InstanceType&lt;never&gt;;  // never
type T23 = InstanceType&lt;string&gt;;  // Error
type T24 = InstanceType&lt;Function&gt;;  // Error
</code></pre>
<blockquote>
<p>注意：<code>Exclude</code>类型是<a href="https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-307871458">建议的</a><code>Diff</code>类型的一种实现。我们使用<code>Exclude</code>这个名字是为了避免破坏已经定义了<code>Diff</code>的代码，并且我们感觉这个名字能更好地表达类型的语义。</p>
</blockquote>

                    </main>

                    <nav class="nav-wrapper" aria-label="Page navigation">
                        <!-- Mobile navigation buttons -->
                            <a rel="prev" href="../../zh/reference/index.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                                <i class="fa fa-angle-left"></i>
                            </a>

                            <a rel="next prefetch" href="../../zh/reference/utility-types.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                                <i class="fa fa-angle-right"></i>
                            </a>

                        <div style="clear: both"></div>
                    </nav>
                </div>
            </div>

            <nav class="nav-wide-wrapper" aria-label="Page navigation">
                    <a rel="prev" href="../../zh/reference/index.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                        <i class="fa fa-angle-left"></i>
                    </a>

                    <a rel="next prefetch" href="../../zh/reference/utility-types.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                        <i class="fa fa-angle-right"></i>
                    </a>
            </nav>

        </div>




        <script>
            window.playground_copyable = true;
        </script>


        <script src="../../elasticlunr.min.js"></script>
        <script src="../../mark.min.js"></script>
        <script src="../../searcher.js"></script>

        <script src="../../clipboard.min.js"></script>
        <script src="../../highlight.js"></script>
        <script src="../../book.js"></script>

        <!-- Custom JS scripts -->


    </div>
    </body>
</html>
